<template>
  <div class="table">
    <el-table
      :data="list"
      tooltip-effect="dark"
      :default-sort="{ prop: 'date', order: 'descending' }"
      @cell-dblclick="openEditColumn"
    >
      <template v-for="(item, index) in items">
        <el-table-column
          :key="index"
          :label="item.label"
          :prop="item.prop"
          align="center"
        >
          <template slot-scope="scope">
            <el-input
              v-if="
                scope.row.edit &&
                  (item.label === '考勤' ||
                    item.label === '课堂互动' ||
                    item.label === '论文成绩')
              "
              size="mini"
              v-model="scope.row[item.prop]"
            ></el-input>
            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
      </template>

      <el-table-column v-if="hasOperation" align="center" label="操作">
        <template slot-scope="scope">
          <slot name="operation" :data="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'tableList',
  props: {
    hasOperation: {
      type: Boolean,
      default: true,
    },
    items: {
      type: Array,
      require: true,
    },
    list: {
      type: Array,
      require: true,
    },
  },
  mounted() {},
  data() {
    return {}
  },
  methods: {
    openEditColumn(row, column, cell, event) {
      this.list.forEach(item => {
        if (item.idx === row.idx) {
          // 激活当前点击的单元格进入可以编辑（span与el-input标签显示隐藏切换）
          item.edit = true
        }
      })
    },
  },
  computed: {},
}
</script>

<style lang="scss" scoped>
.table {
  .courseSubjectTag {
    margin-top: 5px;
  }
}
</style>
